(function flexible(window, document) {
    let docEl = document.documentElement;
    let dpr = window.devicePixelRatio || 1;
    let maxClientWidth = 1024; // 最大宽度限制
    let designWidth = 750; // 设计稿宽度

    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px';
        } else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize);
        }
    }
    setBodyFontSize();

    function setRemUnit() {
        let clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= maxClientWidth) {
            docEl.style.fontSize = '100px';
        } else {
            //将屏幕宽度等分为100份，然后以每一份的宽度作为1rem的大小。这样，无论在何种设备和浏览器窗口大小下，1rem的大小都会相对于屏幕宽度保持一致，从而实现响应式布局。
            //如果设计稿的宽度是750px，那么在750px宽度的设备上，1rem就等于7.5px（750px/100）。如果设备的宽度是375px，那么1rem就等于3.75px（375px/100）。
            docEl.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
        }
    }
    setRemUnit();

    let resizeThrottled = throttle(setRemUnit, 300); // 使用节流函数
    //用于检查window对象是否有orientationchange属性。如果有，说明浏览器支持orientationchange事件，这个事件会在设备的屏幕方向改变时触发（例如，用户将手机从竖屏模式旋转到横屏模式）。
    let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    window.addEventListener(resizeEvt, resizeThrottled);
    //用于检查window对象是否有pageshow属性。如果有，说明浏览器支持pageshow事件，这个事件会在页面加载时触发（包括从缓存中加载页面）。
    window.addEventListener('pageshow', function(e) {
        //Event对象的persisted属性。这个属性是一个布尔值，如果页面是从浏览器的缓存中加载的，那么它的值就是true。
        if (e.persisted) {
            resizeThrottled();
        }
    });
    
    //如果设备支持0.5px，那么html元素的class会添加一个’hairlines’，这样可以解决1px在高清屏上显示为2px的问题。
    if (dpr >= 2) {
        if (window.CSS && window.CSS.supports && window.CSS.supports('border-width', '.5px')) { // 使用@supports规则
            docEl.classList.add('hairlines');
        }
    }

    // 节流函数
    function throttle(func, wait) {
        let timeout;
        return function() {
            let context = this;
            let args = arguments;
            if (!timeout) {
                timeout = setTimeout(function() {
                    timeout = null;
                    func.apply(context, args);
                }, wait);
            }
        };
    }
}(window, document));
